<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Notepad</title>

  <!-- bootstrap -->
  <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

  <!-- animate.css -->
  <link rel="stylesheet" href="./assets/css/animate.min.css" />

  <!-- mui -->
  <link rel="stylesheet/less" href="./assets/plugins/mui/css/mui.min.css" />

  <!-- city-picker -->
  <link rel="stylesheet" href="./assets/plugins/city-picker/city-picker.css" />

  <!-- 重置样式 -->
  <link rel="stylesheet/less" href="./assets/css/reset.less" />

  <!-- 公共样式 -->
  <link rel="stylesheet/less" href="./assets/css/common.less" />

  <!-- 页面独立的 -->
  <link rel="stylesheet/less" href="./assets/css/UserProfile.less" />
</head>

<body>
  <!-- 用户信息 -->
  <!-- 头像 -->
  <div class="user">
    <div class="avatar wow fadeInUp">
      <label for="img">
        <img src="./assets/images/avatar.png" id="avatar" style="object-fit: cover; width: 100%; height: 100%" />
      </label>
    </div>
  </div>

  <form class="profile wow fadeInUp" data-wow-delay="200ms" method="post" id="onSubmitEvent">
    <div class="form-group d-none" style="display: none">
      <input type="file" class="form-control" id="img" name="img" />
    </div>

    <div class="form-group">
      <label for="nickname">昵称</label>
      <input type="text" class="form-control" id="nickname" name="nickname" placeholder="请输入昵称" required />
    </div>

    <div class="form-group">
      <label for="mobile">手机号</label>
      <input type="number" class="form-control" id="mobile" name="mobile" placeholder="请输入手机号" readonly />
    </div>

    <div class="form-group">
      <label for="password">密码</label>
      <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" />
    </div>

    <div class="form-group">
      <label for="gender">性别</label>
      <select class="form-control" id="gender" name="gender">
        <option>请选择</option>
        <option value="0">男</option>
        <option value="1">女</option>
        <option value="2">保密</option>
      </select>
    </div>

    <div class="form-group">
      <label for="c-city">城市</label>
      <div style="position: relative">
        <input readonly type="text" data-toggle="city-picker" id="city" name="city" />
      </div>
    </div>

    <div class="form-group">
      <label for="address">详细地址</label>
      <input type="text" class="form-control" id="address" name="address" placeholder="请输入详细地址" />
    </div>

    <div class="action">
      <button class="btn">提交</button>
    </div>
  </form>
</body>

</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>

<!-- mui -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>

<!-- city-picker -->
<script src="./assets/plugins/city-picker/city-picker.data.min.js"></script>
<script src="./assets/plugins/city-picker/city-picker.min.js"></script>

<!-- 引入接口插件+封装请求的方法 -->
<script src="./assets/plugins/axios/axios.min.js"></script>
<script src="./assets/plugins/axios/request.js"></script>

<!-- bootstrap-validator -->
<script src="./assets/plugins/bootstrap-validator/bootstrapValidator.min.js"></script>

<!-- 引入cookie -->
<script src="./assets/plugins/cookie.js"></script>

<!-- 引入helpers校验用户 -->
<script src="./assets/plugins/helpers.js"></script>

<script>
  //实例化wow.js
  new WOW().init();

  let business = cookie.get("business") ? cookie.get("business") : {};
  business = JSON.parse(business);

  // 进入页面先用cookie赋值
  if (JSON.stringify(business) != "{}") {
    $("#avatar").attr("src", business.avatar)
    $("#nickname").val(business.nickname);
    $("#mobile").val(business.mobile);
    // $("#password").val(business.password);
    // 注意理解性别作为下拉框的回写写法，给下拉框元素id或其他标识，选中这个框对象，给他的value赋值，它的value值会匹配每个框的value
    $("#gender").val(business.gender);
    // $("#gender").val("22");
    // console.log(typeof $("#gender"));
    // console.log($("#gender").val());
    if (business.region) {
      $("#city").citypicker({
        province: business.province,
        city: business.city,
        district: business.district,
      });
    }
    $("#city").on("cp:updated", function () {
      var citypicker = $(this).data("citypicker");
      var code =
        citypicker.getCode("district") ||
        citypicker.getCode("city") ||
        citypicker.getCode("province");
      console.log(code);
    });
    $("#address").val(business.address);
  }

  // 除了加载页面时要显示图片，修改图片时也要直接展示出来
  $("#img").change(function () {
    // 方法1
    // form键值对获取不到file的input对象的files数组就拿不到files[0]这个文件对象，所以直接用id选择器拿input对象
    // let file = $("#img").prop("files")[0];
    // let avatar = URL.createObjectURL(file);
    // $("#avatar").attr("src", avatar);
    // console.log(typeof files);
    // console.log(src);

    // 方法2
    // 用这种方法拿到的对象数组中的文件类型input的value是一个文件类型的对象
    let formData = new FormData(document.getElementById("onSubmitEvent"));
    let val = Object.fromEntries(formData.entries());
    let val_img = URL.createObjectURL(val.img);
    $("#avatar").attr("src", val_img);
  });


  $("#onSubmitEvent").submit(async function (e) {
    e.preventDefault();

    // 验证
    if (!$("#nickname").val()) {
      mui.alert("昵称不能为空");
      return false;
    }
    // 验证通过
    // 获取表单数据
    let formData = new FormData(document.getElementById("onSubmitEvent"));
    let val = Object.fromEntries(formData.entries());
    // 让序列化键值对变成对象、让表单元素序列化需要给表单name属性作为key
    // 总之最终获得一个对象key值是表单的name，val值是每个表单中的val
    console.log(typeof val.img)
    console.log(typeof $("#img"))

    // 创建变量，存放请求所必须的参数。
    let data = {
      id: business.id,
      nickname: val.nickname,
      mobile: val.mobile,
      gender: val.gender,
      address: val.address,
    };
    // 密码要加非空约束的原因是，如果把密码改为了空，那么账号就无法登录了，那么账号会变成无用的垃圾账号。
    if (val.password) {
      data.password = val.password;
    }
    if (val.img.size > 0) {
      data.avatar = val.img;
    }
    // data拿到了某个标签中data-citypicker的属性的值
    // 我猜测这个值是一个数组
    var citypicker = $("#city").data("citypicker");
    console.log(citypicker);
    var code = citypicker.getCode("district") || citypicker.getCode("city") || citypicker.getCode("province");
    data.region = code;

    // 数据拿完了就要发起请求更新后台数据了了
    // 发起请求修改后台的数据
    let result = await UPLOAD({ url: "business/profile", params: data });
    if (result.code == 1) {
      cookie.set("business", JSON.stringify(result.data));
      mui.toast(result.msg);
      // setTimeout(() => {
      //   location.href = "user.html";
      // }, 2000);
    } else {
      mui.toast(result.msg);
    }
  });
</script>